<template>
  <div class="box">
      <div class="invite-box">
        <van-tabs type="card" v-model="active">
            <van-tab :title="`直邀 (${num})`">
                <div class="invite-content">
                    <div class="invite-search">
                        <input type="text" placeholder="输入微信昵称或手机号">
                    <van-icon name="search" size="24" color="#333"/>
                    </div>
                    <ul class="invite-list">
                        <li class="invite-item" v-for="(item,index) in inviteList" :key="index">
                            <p>微信昵称:{{item.nickname}}</p>
                            <p>注册手机号：{{item.tel}}</p>
                            <p>注册时间：{{item.time}}</p>
                            <div class="invite-num" v-show="item.num>0" @click="getInviteList()">
                                <p>直邀人数：{{item.num}}</p>
                                <van-icon name="arrow" color="#999" size="18"/>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <van-tab :title="`全部成员 (${allNum})`">
                <div class="invite-content">
                    <div class="invite-search">
                        <input type="text" placeholder="输入微信昵称或手机号">
                    <van-icon name="search" size="24" color="#333"/>
                    </div>
                    <ul class="invite-list">
                        <li class="invite-item" v-for="(item,index) in inviteList" :key="index">
                            <p>微信昵称:{{item.nickname}}</p>
                            <p>注册手机号：{{item.tel}}</p>
                            <p>注册时间：{{item.time}}</p>
                            <div class="invite-num" v-show="item.num>0">
                                <p>直邀人数：{{item.num}}</p>
                                <van-icon name="arrow" color="#999" size="18"/>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
      </van-tabs>
      <!-- 弹窗 -->
      <van-popup v-model="show" >
          <van-icon name="close" color="#666" size="18" class="prop-close" @click="closeProp()"/>
         <p class="prop-title">远方的风的邀请</p>
         <ul class="prop-list">
             <li class="prop-list-item" v-for="(value,k) in propList" :key="k">
                 <span>昵称：{{value.nickname}}</span>
                 <span>{{value.time}}</span>
             </li>
         </ul>
      </van-popup>
    </div>
      
  </div>
</template>

<script>
export default {
    name:'Invite',
    data(){
        return{
            active:0,// tab栏选中
            num:10, // 直邀数
            allNum:100, // 全部数
            inviteList:[
                {nickname:'远方的风',tel:'15225066666',time:'2019-12-17',num:0},
                {nickname:'远方的风',tel:'15225066666',time:'2019-12-17',num:10}
            ],
            show:false,//是否显示弹窗
            propList:[
                {nickname:'远**',time:'2019-12-17'},
                {nickname:'远**',time:'2019-12-17'},
                {nickname:'李**',time:'2019-12-17'},
                {nickname:'张*',time:'2019-12-17'},
                {nickname:'李*',time:'2019-12-17'},
                {nickname:'李**',time:'2019-12-17'},
                {nickname:'张**',time:'2019-12-17'},
                {nickname:'赵**',time:'2019-12-17'},
                {nickname:'李**',time:'2019-12-17'},
                {nickname:'张**',time:'2019-12-17'},
                {nickname:'赵**',time:'2019-12-17'},
            ]
        }
    },
    methods:{
        getInviteList(){
            this.show=true
        },
        closeProp(){
            this.show=false
        }
    }
}
</script>

<style lang="scss" scoped>
 @import "@/assets/css/public";
.box{
    background-color: $gray_bg;
}
.invite-content{
    padding:vw(20);
}
.invite-search{
    
    position: relative;
    background-color: #E6E6E6;
    height: vw(64);
    border-radius: vw(32);
    overflow: hidden;
    >i{
        position: absolute;
        top:vw(10);
        right:vw(30);
        width: vw(34);
    }
    >input{
        width: 100%;
        height: 100%;
        padding-left:vw(15);
        padding-right:vw(60);
        line-height: vw(64);
        background-color: transparent;
        font-size: vw(28);
    }

}
.invite-list{
    padding:vw(20) 0;
    .invite-item{
        padding:vw(20);
        margin-bottom:vw(20);
        background-color: #fff;
        border-radius: vw(10);
        p{
            font-size: vw(28);
            color: #666;
            line-height: vw(72);
        }
        .invite-num{
            border-top:1px solid $gray_bg;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.prop-close{
    position: absolute;
    right:vw(10);
    top:vw(10);
}
.prop-title{
    line-height: vw(105);
    font-size: vw(36); 
    text-align: center;
}
.prop-list{
    max-height:85vw;
    overflow-y: auto;
    .prop-list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 vw(45);
        line-height: vw(76);
        border-bottom: 1px solid $gray_bg;
        font-size: vw(28);
        color: #999;
    }
}
</style>